<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <style>
        #app {
            text-align: center;
        }
        th {
            font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA no-repeat;
        }
        td {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
        table {
            position: relative;
            width: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }
        input:hover {
            background: whitesmoke;
        }
        input {
            padding: 7px 0;
            border-radius: 3px;
            padding-left:5px;
            text-align: center;
            width: 90%;
            height: 160px;
            border: 0;
        }
        button {
            border: 0;
        }
        button:hover {
            background: lightgrey;
        }
    </style>
</head>
<body>
<img id="loading" th:src="@{/loading.gif}" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; display: none; opacity: 0.7"/>
<div id="app">
    <button onclick="window.location.assign('/admin')" style="float: left; width: 80px; height: 30px"><- 返回</button>
    <table>
        <form class="addGoods" th:action="@{/admin/add/goods}" method="post" enctype="multipart/form-data">
            <tr>
                <th style="text-align: center;">商品ID</th>
                <th style="text-align: center;">图示(点击选择)</th>
                <th style="text-align: center;">商品名称</th>
                <th style="text-align: center;">商品描述</th>
                <th style="text-align: center;">单品价格</th>
                <th style="text-align: center;">操作</th>
            </tr>
            <tr>
                <td style="width: 80px">
                    <p>
                        <b>👉</b>
                    </p>
                </td>
                <td>
                    <img th:src="@{/data/goods/default.jpg}" style="width: 144px;height: 181.8px"
                         id="img0" onclick="upImg('input0')">
                    <input style="display: none" type="file" name="img" id="input0"
                           onchange="showImg(this,'img0')">
                </td>
                <td>
                    <input type="text" placeholder="商品名称" name="name">
                </td>
                <td style="text-align: center;">
                    <input type="text" placeholder="商品描述" name="describe">
                </td>
                <td>
                    <input type="text" placeholder="单品价格" name="price">
                </td>
                <td>
                    <button onclick="loading()" type="submit" style="background: mediumpurple;color: white;border-radius: 5px;width: 50px;height: 30px">
                        <b>添加</b>
                    </button>
                </td>
            </tr>
        </form>
        <!--/*@thymesVar id="goodsList" type="java.awt.List"*/-->
        <tr th:if="${goodsList} != null" th:each="goods,stat : ${goodsList}" style="height: 35px">
            <form th:action="@{/admin/update/goods}" method="post" enctype="multipart/form-data">
                <td>
                    <b>[[${goods.getId()}]]</b>
                </td>
                <td style="text-align: center;">
                    <img th:src="@{${goods.getImage()}}" style="width: 144px;height: 181.8px"
                         th:id="${'img'+stat.count}" th:onclick="upImg('input[[${stat.count}]]')">
                    <input style="display: none" type="file" name="img" th:id="${'input'+stat.count}"
                           th:onchange="showImg(this,'img[[${stat.count}]]')">
                </td>
                <td style="text-align: center;">
                    <input type="number" style="display: none;" th:value="${goods.getId()}" name="id">
                    <input th:value="${goods.getName()}" name="name">
                </td>
                <td style="text-align: center;">
                    <input th:value="${goods.getDescribe()}" name="describe">
                </td>
                <td style="text-align: center;color: purple">
                    <b>
                        <input th:value="${goods.getPrice()}" name="price">
                    </b>
                </td>
                <td style="text-align: center;">
                    <button type="submit" style="background: #409EFF;color: white;border-radius: 5px;width: 50px;height: 30px"
                            onclick="if (confirm('确认修改该商品的信息？')===false) {return false;} else {loading();}">
                        <b>修改</b>
                    </button>
                    <button onclick="loading()" type="button" style="background: #F56C6C;color: white;border-radius: 5px;width: 50px;height: 30px"
                            th:onclick="delGoods('[[${goods.getId()}]]')">
                        <b>删除</b>
                    </button>
                </td>
            </form>
        </tr>
    </table>
    <br/><br/><br/>
</div>
<script th:inline="javascript">
    function showImg(input, id) {
        var file = input.files[0];
        var reader = new FileReader();

        // 图片读取成功回调函数
        reader.onload = function (e) {
            document.getElementById(id).src = e.target.result
        };
        reader.readAsDataURL(file)
    }

    function upImg(upImg) {
        document.getElementById(upImg).click();
    }

    function delGoods(goodsId) {
        if (confirm("确认删除此商品？")) {
            window.location = "/admin/del/goods?id=" + goodsId;
            loading();
        }
    }

    function loading() {
        var img = document.getElementById("loading");
        img.style.display = "";
    }
</script>
<script th:inline="javascript">
    window.onload = function () {
        if ([[${param.msg}]] != null) {
            alert([[${param.msg}]]);
            // 去除msg参数
            var url = window.location.href;    //页面url
            var urlParam = window.location.search.substr(1);   //页面参数
            var beforeUrl = url.substr(0, url.indexOf("?"));   //页面主地址（参数之前地址）
            var nextUrl = "";

            var arr = [];
            if (urlParam !== "") {
                var urlParamArr = urlParam.split("&"); //将参数按照&符分成数组
                for (var i = 0; i < urlParamArr.length; i++) {
                    var paramArr = urlParamArr[i].split("="); //将参数键，值拆开
                    //如果键雨要删除的不一致，则加入到参数中
                    if (paramArr[0] !== "msg") {
                        arr.push(urlParamArr[i]);
                    }
                }
            }
            if (arr.length > 0) {
                nextUrl = "?" + arr.join("&");
            }
            url = beforeUrl + nextUrl;
            window.location.href = url;
        }
    };
</script>
</body>
</html>